<template>
	<view class="login">
		<view class="logo">
			<image src="/static/log.png" mode="widthFix"></image>
		</view>

		<view class="text">
			欢迎登陆狗子博客
		</view>

		<u--form labelWidth="30" labelPosition="left" :model="form" :rules="rules" ref="form">
			<u-form-item leftIcon="phone" prop="phone" ref="item1">
				<u--input placeholder="请输入手机号" v-model="form.phone" border="none"></u--input>
			</u-form-item>
			<u-form-item leftIcon="lock" prop="password" ref="item1">
				<u--input placeholder="请输入密码" type="password" v-model="form.password" border="none"></u--input>
			</u-form-item>
		</u--form>

		<u-button @click="login" class="login-btn" type="primary">登陆</u-button>
		<text class="register" @click="register">没有注册？请点击注册</text>
	</view>
</template>

<script>
	import {
		login
	} from '@/config/api.js'
	import {
		mapMutations
	} from 'vuex'

	export default {
		name: "login",
		data() {
			return {
				form: {
					phone: "",
					password: ""
				},
				rules: {
					phone: {
						type: 'string',
						required: true,
						length: 11,
						message: "请填写手机号",
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						min: 6,
						max: 20,
						required: true,
						message: "请填写6～20位的密码",
						trigger: ['blur', 'change']
					}
				},
			};
		},
		created() {
			console.log(getCurrentPages());
		},
		methods: {
			
			...mapMutations(['setUser']),
			async login() {
				try {
					await this.$refs.form.validate()

					const user = await login(this.form)
					console.log(user);

					//	如果登陆失败，将异常告知给用户
					if (user.code !== 200) return uni.showToast({
						title: user.msg,
						icon: "error"
					})

					this.setUser(user.data)
					uni.showToast({
						title: "登陆成功"
					})
					console.log(getCurrentPages());
					uni.navigateBack({
						delta: 2,
						success: res => {
							console.log(res);
						},
						fail: res => {
							console.log(res);
						},
						complete: res => {
							console.log(res);
						},
					});
				} catch (e) {
					console.log(e);
				}
			},
			register(){
				uni.navigateTo({
					url: '/pages/register/register',
				});
			}
		}
	}
</script>

<style lang="scss">
	.login {
		width: 80%;
		height: 65vh;
		margin: 0 auto;
		padding: 8vw;
		box-sizing: border-box;
		background-color: #fff;
		border-radius:2vw;

		.logo {
			width: 30vw;
			margin: 0 auto;

			image {
				width: 100%;
			}
		}

		.text {
			margin-top: 2vh;
			font-size: 6.6vw;
			font-weight: 600;
			text-align: center;
		}

		::v-deep .uni-input-input {
			width: 90%;
			border-radius: 4px;
			border: 1px solid #dcdfe6;
			padding: 0px 10px;
			border-color: rgb(242, 174, 39);
		}

		::v-deep .u-input__content__field-wrapper__field {
			height: 38px;
		}

		.login-btn {
			margin-top: 20px;
		}

		.register {
			margin-top: 1vh;
			display: block;
			text-align: center;
			color: #aa2565;
		}
	}
</style>
